<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-toolbar clearfix">
                    <div class="toolbar-btn-action">
                        <a class="btn btn-success m-r-5" href="javascript:goBack();"><i
                                class="mdi mdi-keyboard-backspace"></i>返回</a>
                    </div>
                </div>
                <div class="card-body">
                    <form id="link_form" method="post" class="row">
                        <div class="form-group col-md-12">
                            <label for="originUrl">原始链接</label>
                            <input type="text" class="form-control" id="originUrl" name="originUrl" value=""
                                   placeholder="请输入原始链接">
                        </div>
                        <div class="form-group col-md-12">
                            <label for="groupId">分组</label>
                            <div class="form-controls">
                                <select class="form-control" id="gid" name="gid">

                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label>是否启用</label>
                            <div class="clearfix">
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" name="enableStatus" value="1" checked><span>未启用</span>
                                </label>
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" name="enableStatus" value="2"><span>启用</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group col-md-12">
                            <label>有效期</label>
                            <div class="clearfix">
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" name="validDateType" value="1" checked><span>永久有效</span>
                                </label>
                                <label class="lyear-radio radio-inline radio-primary">
                                    <input type="radio" name="validDateType" value="2"><span>自定义</span>
                                </label>
                            </div>
                        </div>

                        <div class="form-group col-md-12" id="validDateWrap" style="display: none;">
                            <label></label>
                            <input type="text" class="form-control" id="validDate" name="validDate"/>
                        </div>
                        <div class="form-group col-md-12">
                            <label for="info">描述</label>
                            <textarea class="form-control" id="info" name="info" rows="5" placeholder="描述"></textarea>
                        </div>

                        <div class="form-group col-md-12">
                            <button type="button" class="btn btn-primary" onclick="submitCreateLink();">确 定</button>
                            <button type="button" class="btn btn-default" onclick="goBack();">返 回</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        initGroup();

        initValidDate();

        $('input[name="validDateType"]').change(function () {
            var v = $(this).val();
            if (v == 1) {
                $('#validDateWrap').fadeOut();
            } else {
                $('#validDateWrap').fadeIn();
            }

        });
    });

    function goBack() {
        openPage('pages/home.html')
    }

    function submitCreateLink() {
        var data = {
            originUrl: $('#originUrl').val(),
            gid: $('#gid').val(),
            enableStatus: parseInt($('input[name="enableStatus"]:checked').val()),
            validDateType: parseInt($('input[name="validDateType"]:checked').val()),
            validDate: $('#validDate').val() + ' 23:59:59',
            info: $('#info').val(),
        }
        xin_request.post(create_short_link_url, data, function (result, textStatus, jqXHR) {
            if (result.code == success_code) {
                goBack();
            } else {
                lightyear.notify('添加短链接失败:' + result.message, 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
            }
        }, function (jqXHR, textStatus, errorTh) {
            console.log('添加短链接失败', textStatus, errorTh)
            lightyear.notify('添加短链接失败', 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
            throw errorTh
        });
    }

    function initValidDate() {
        $('input[name="validDate"]').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minDate: moment().startOf('day')
        }, function (start, end, label) {
        });
    }

    function initGroup() {
        xin_request.get(group_url, {}, function (result, textStatus, jqXHR) {
            if (result.code == success_code) {
                if (result.data && result.data.length > 0) {
                    var html = '';
                    $.each(result.data, function (i, e) {
                        html += '<option value="' + e.gid + '">' + e.name + '</option>'
                    })
                    $('#gid').html(html);

                    initLinkTable();
                }
            }
        }, function (jqXHR, textStatus, errorTh) {
            console.log('查询分组失败', textStatus, errorTh)
            lightyear.notify('查询分组失败', 'danger', 2000, 'mdi mdi-emoticon-sad', 'top', 'right');
            throw errorTh
        });
    }
</script>